<template>
  <div ref="home" id="home">
    <NavBar>
      <template v-slot:default>诗仙书城</template>
    </NavBar>
    <div class="wrapper">
      <div class="content">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in banner" :key="index">
            <img v-if="banner.length > 0" v-lazy="item.img_url" class="img">
          </van-swipe-item>
        </van-swipe>
        <Recommend :recommends="recommends"></Recommend>
        <TabControl :titles="['畅销', '新书', '精选']" @tabClick="tabClick" />
        <goods-list :goodsList="showGoods" />
      </div>
    </div>
    <back-top @bTop="bTop" />
  </div>
</template>

<script>
import { onMounted, ref, reactive, computed, getCurrentInstance } from "vue";
import Recommend from '@/views/home/Recommend/index'
import TabControl from '@/components/content/tabControl/index'
import goodsList from '@/components/content/goods/index'
import backTop from '@/components/common/backTop/index'

export default {
  name: "home",
  components: {
    Recommend,
    TabControl,
    goodsList,
    backTop
  },
  setup() {
    const home = ref(null)
    let bscroll = reactive({})
    const tmId = ref(0)
    const banner = ref([])
    const recommends = ref([])
    const types = ['sales', 'new', 'recommend']
    const currentType = ref('sales')
    const goods = reactive({
      sales: { page: 0, list: [] },
      new: { page: 0, list: [] },
      recommend: { page: 0, list: [] }
    })
    const showGoods = computed(() => goods[currentType.value].list)
    onMounted(async () => {
      // bscroll=new baseScroll(document.querySelector('.wrapper'),{
      //   probeType:true
      // })
      const { proxy } = getCurrentInstance()//vue3中通过proxy获取原型属性
      await proxy.$API.home.getHomeAllData().then(res => {
        banner.value = res.slides
        recommends.value = res.goods.data
      }).catch(err => {
      })
      await proxy.$API.home.getHomeGoods('sales').then(res1 => {
        goods.sales.list = res1.goods.data//
      })
      await proxy.$API.home.getHomeGoods('recommend').then(res2 => {
        goods.new.list = res2.goods.data
      })
      await proxy.$API.home.getHomeGoods('new').then(res3 => {
        goods.recommend.list = res3.goods.data
      })
    })
    function tabClick(index) {
      tmId.value = index
      currentType.value = types[index]
    }
    function bTop() {
      document.documentElement.scrollTop = 0
    }
    return {
      banner,
      recommends,
      tmId,
      tabClick,
      goods,
      types,
      showGoods,
      currentType,
      bTop,
      bscroll,
      home
    }
  }
}
</script>

<style scoped>
.img {
  height: 200px;
  width: 100%;
  text-align: center;
}

.van-swipe {
  margin-top: 45px;
  height: 100%;
  width: 100% !important;
}

#home {
  width: 100%;
}

/*#home{*/
/*  position: relative;*/
/*  height: 100vh;*/
/*}*/
/*.wrapper{*/
/*  position: absolute;*/
/*  top:45px;*/
/*  left:0;*/
/*  right: 0;*/
/*  overflow: hidden;*/
/*}*/
</style>
